<template>
  <div class="app-container">
    <!--返回上一步-->
    <div class="back-bar-box mb-30">
      <div class="btn-back" @click="$router.go(-1)"><i class="el-icon-back"></i> 返回</div>
      <div class="line"></div>
      <div class="name">{{$route.name}}</div>
    </div>
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline mb-20">
      <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="showCreate()"
                 v-permission="'article:add'">添加
      </el-button>
    </el-form>

    <el-table :data="categoryList" v-loading="listLoading" border fit
              highlight-current-row>

      <el-table-column align="center" prop="id" label="id"></el-table-column>
      <el-table-column align="center" prop="sort" label="排序"></el-table-column>
      <el-table-column align="center" prop="name" label="分类名称"></el-table-column>


      <el-table-column align="center" label="管理" width="200">
        <template slot-scope="scope">
          <el-link type="primary" @click="showUpdate(scope.$index)" v-permission="'article:update'">修改</el-link>
          <el-link type="danger" @click="removeDataById(scope.row.id)" v-permission="'article:delete'">删除</el-link>
        </template>
      </el-table-column>
    </el-table>


    <!--添加弹出框-->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" top="2vh" width="800px">

      <el-form class="small-space" :model="category" label-position="left"
               style='width: 500px; margin-left:50px;'>
        <el-form-item label="分类名称">
          <el-input v-model="category.name" style="width: 400px"/>
        </el-form-item>

        <el-form-item label="分类排序">
          <el-input-number v-model="category.sort" controls-position="right" :min="0" :max="100"/>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="dialogStatus==='create'" type="success" @click="saveOrUpdateCategory()">创 建</el-button>
        <el-button type="primary" v-else @click="saveOrUpdateCategory()">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        categoryList: [],
        category:{},
        dialogStatus: 'create',
        dialogFormVisible: false,
        textMap: {
          update: '编辑分类',
          create: '创建分类'
        },
        listLoading: false,//数据加载等待动画
      }
    },created() {
      this.getList()
    },methods:{
      getList(){
        this.listLoading=true
        this.api({
          url: `/article/getArticleCategory`,
          method: 'get',
        }).then(data => {
          this.listLoading=false
          this.categoryList = data
        })
      },
      showCreate() {
        //显示新增对话框
        this.dialogStatus = "create"
        this.dialogFormVisible = true
      },
      showUpdate($index) {
        //显示修改对话框
        this.category = Object.assign({}, this.categoryList[$index]);//深拷贝
        // this.category =this.categoryList[$index]
        this.dialogStatus = "update"
        this.dialogFormVisible = true
      },
      saveOrUpdateCategory(){
        this.api({
          url: `/article/saveOrUpdateCategory`,
          method: 'post',
          data:this.category
        }).then(()=>{
          this.resetData()
        })
      },
      resetData(){
        this.dialogFormVisible=false
        this.$message.success("操作成功")
        this.getList()
      },
      //删除
      removeDataById(id) {
        // debugger
        //MessageBox 在utils/request.js中已引用
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return this.api({
            url: `/article/delCategory/${id}`,
            method: "get",
          })
        }).then(() => {
          this.getList(this.page)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch((response) => { // 失败
          if (response === 'cancel') {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          } else {
            this.$message({
              type: 'error',
              message: '删除失败'
            })
          }
        })
      },
    }
  }
</script>
